<template>

    <template v-if="dataRows.length > 0">
        <view class="list">
            <view class="item" v-for="(row, index) in dataRows" :key="row.id">
                <view class="top">
                    <ConnectStatus :online="Boolean(row.connectStatus)" />
                    <MoreS size="25px" @click="openSheet(index)" />
                </view>
                <view class="wrap">
                    <view class="body">
                        <NetImage :src="row.deviceType.icon" mode="widthFix" class="icon" />
                        <view class="name">{{ row.deviceType.name }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="m-t-60">
            <AddDevice class="m-t-60" @bind="onBindDevice" />
        </view>
    </template>
	<view v-else class="empty">
		<Empty description="暂无设备" />
        <view class="m-t-60">
            <AddDevice class="m-t-60" @bind="onBindDevice" />
        </view>
	</view>

    <nut-action-sheet v-model:visible="show" :menu-items="menuItems" @choose="onChoose" />



    <LoadingPage v-if="!inited" />
</template>


<script lang="ts" setup>
    import { ref } from 'vue';
    import NetImage from '@/components/NetImage.vue'
    import LoadingPage from '@/components/LoadingPage.vue'
    import AddDevice from './components/AddDevice.vue'
    import ConnectStatus from './components/ConnectStatus.vue'
    import { MoreS } from '@nutui/icons-vue-taro'
    import { listApi, queryCleanResApi, querySetMaxFlowResApi, setMaxFlowApi, startCleanApi, delApi } from '@/api/Device';
import { DEVICE_TYPE } from '@/constant';
import { hideLoading, showLoading, showModal, showToast } from '@/utils/framework';
import { testApi } from '@/api/WaterTest';


    const inited = ref(false)

    let queryCount = 0

    const dataRows = ref<any[]>([])

    const show = ref(false)
    const menuItems = ref<any[]>([])

    function onChoose(e) {console.log(e)
        if(e.key == "setMaxWater") {
            setMaxWaterFlow(e.id)
        }else if(e.key == "clean") {
            startClean(e.id)
        }else if(e.key == 'unbind') {
            unbind(e.id)
        }else if(e.key == 'startTest') {
            test(e.id)
        }
    }

    function onBindDevice() {
        getList()
    }

    function openSheet(index:number) {
        const device = dataRows.value[index]
        console.log(device)
        if(device.deviceType.code == DEVICE_TYPE.WATER) {
            menuItems.value = [
                {name : '下发最大用水量', key : 'setMaxWater', id : device.id},
                {name : '清洗', key : 'clean', id : device.id},
                {name : '删除', key : 'unbind', color : 'red', id : device.id},
            ]
        }else if(device.deviceType.code == DEVICE_TYPE.TESTING) {
            menuItems.value = [
                // {name : '启动检测', key : 'startTest', id : device.id},
                {name : '删除', key : 'unbind', color : 'red', id : device.id},
            ]
        }

        show.value = true
    }


    async function getList() {
        const r = await listApi()
        if(r.data && r.data.length > 0) {
            dataRows.value = r.data
        }
    }



    async function test(deviceId) {
        //showLoading()
        const res = await testApi(deviceId)
        
    }



    async function unbind(deviceId) {
        showLoading()
        const res = await delApi(deviceId)

        if(res.success) {
            let index = dataRows.value.findIndex(item => item.id === deviceId);
            dataRows.value.splice(index, 1)

            showToast('解绑成功')
            
        }else {
            hideLoading()
            showModal('下发失败')
        }
    }


    async function setMaxWaterFlow(deviceId) {
        queryCount = 0
        showLoading()
        const res = await setMaxFlowApi(deviceId)

        if(res.success) {
            setTimeout(() => {
                querySetMaxWaterFlowRes(deviceId)
            }, 3000)
            
        }else {
            hideLoading()
            showModal('下发失败')
        }
    }

    async function querySetMaxWaterFlowRes(id:number) {
        const res = await querySetMaxFlowResApi(id)
        if(!res.success) {
            hideLoading()
            showModal('下发失败')
        }else if(Number(res.data) == 0) { //继续查询
            if(queryCount < 3) {
                setTimeout(() => {
                    querySetMaxWaterFlowRes(id)
                }, 3000)
            }else {
                hideLoading()
                showModal('下发失败')
            }
        }else if(Number(res.data) == 1) { //开始充电了
            hideLoading()
            showToast('下发成功')
        }else { //失败了
            hideLoading()
            showModal('下发失败')
        }
        
        queryCount ++
    }


    async function startClean(deviceId) {
        queryCount = 0
        showLoading()
        const res = await startCleanApi(deviceId)

        if(res.success) {
            setTimeout(() => {
                queryCleanRes(deviceId)
            }, 3000)
            
        }else {
            hideLoading()
            showModal('冲洗失败')
        }
    }

    async function queryCleanRes(id:number) {
        const res = await queryCleanResApi(id)
        if(!res.success) {
            hideLoading()
            showModal('冲洗失败')
        }else if(Number(res.data) == 0) { //继续查询
            if(queryCount < 3) {
                setTimeout(() => {
                    queryCleanRes(id)
                }, 3000)
            }else {
                hideLoading()
                showModal('冲洗失败')
            }
        }else if(Number(res.data) == 1) { //开始充电了
            hideLoading()
            showToast('冲洗成功')
        }else { //失败了
            hideLoading()
            showModal('冲洗失败')
        }
        
        queryCount ++
    }




    getList().then(() => {
        inited.value = true
    })

</script>


<style lang="scss" src="./index.scss"></style>